import React, { Component } from 'react'
import { connect } from "react-redux";
import { ScrollView, View, Swiper, SwiperItem, Image, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import imgList from '@components/imgList'
import ActivityItem from '@components/Activity/index'
import { getTimeDistance } from '@src/utils/dateTimeUtil'

import './index.scss'

class Index extends Component {

  constructor(props) {
    super(props)
    this.state = {
      adData: [
        {
          desc: '1',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        },{
          desc: '2',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        },{
          desc: '3',
          imgUrl: 'http://47.111.70.141:9021/file/downloadById?fileId=2015938959146684883'
        }
      ],
      activityRecommend: [
        {
          type: '小聚场',
          site: '金川足球公园',
          status: '组队中',
          progress: '9/10',
          time: '05月20日 19:00-21:00',
          tags: ['5人制','1号场']
        },
        {
          type: '训练',
          site: '金川足球公园',
          status: '组队中',
          progress: '9/10',
          time: '05月20日 19:00-21:00',
          tags: ['10人制','2号场']
        }
      ]
    }
  }

  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { 
    console.log('WillUnmount')
  }

  componentDidShow () { 
    console.log('DidShow')
  }

  componentDidHide () {
    console.log('DidHide')
  }

  /**
   * 发起活动
   */
  handleNewActivity = () =>{
    Taro.navigateTo({url: '../newActivity/index'})
  }

  /**
   * 查看消息
   */
  showNotice = () =>{
    Taro.navigateTo({url: '../notice/index'})
  }

  render () {
    const { adData=[], activityRecommend=[] } = this.state
    const { notice=[], activity=[] } = this.props || {}
    return (
      <ScrollView className='index'
        enableFlex
        scrollY>
        <Swiper 
          className='AdSwiper'
          indicatorColor='rgba(255, 255, 255, 0.5)'
          indicatorActiveColor='rgba(255, 255, 255, 1)'
          circular
          indicatorDots
          autoplay>
          {
            adData.map( (item,index) => 
            <SwiperItem key={`banner${index}`}>
                <Image
                    className='bannerImg' mode='scaleToFill' src={item.imgUrl}
                    onClick={() => Taro.showToast({title: item.desc})}/>
            </SwiperItem>)
          }
        </Swiper>
        <View className={`cardItem noticeCard${notice.length == 0 ? ' hide' : ''}`} onClick={this.showNotice}>
          <Image src={imgList.noticeIcon}></Image>
          <View className='noticeContent'>
          {
            notice.length > 2 ? 
            <View className='noticeItem more'>
              <Text>你有{notice.length}条未读消息</Text>
              <Text className='noticeTime'>{getTimeDistance(notice[0].time)}</Text>
            </View>
            :
            notice.map((item, index) => <View key={`notice${index}`} className='noticeItem'>
              <Text>{item.title}</Text>
              <Text className='noticeTime'>{getTimeDistance(item.time)}</Text>
            </View>)
          }
          </View>
          <Image className='rightIcon' src={imgList.rightIcon}></Image>
        </View>
        <View className='cardItem'>
          <View className='cardTitle' onClick={() => Taro.navigateTo({url: '../activity/index'})}>
            <Text>我的活动</Text>
            <Image className='rightIcon' src={imgList.rightIcon}></Image>
          </View>
          <View>
            {
              activity.length > 0 ? 
              activity.map((item, index) => 
                <ActivityItem key={`activity${index}`} value={item} showIcon={false}/>
              )
              :
              <View className='newActivityContainer'>
                <Text>当前未参加过活动，快去发起活动</Text>
                <Button className='activityBtn' onClick={this.handleNewActivity}>发起活动</Button>
              </View>
            }
          </View>
        </View>
        <View className='cardItem activityCard'>
          <View className='cardTitle'>
            <Text>活动推荐</Text>
            <Image className='rightIcon' src={imgList.rightIcon}></Image>
          </View>
          {
            activityRecommend.map((item, index) => 
              <ActivityItem key={`activity${index}`} value={item}/>
            )
          }
        </View>
      </ScrollView>
    )
  }
}

export default connect(({notice, activity}) => ({ notice,activity: activity.present }),{})(Index)

